<template>
  <view class="p_rlt">
    <!-- <view class="lex_com_key" :class="[showSelecProSub ? 'show' : '',showmbox?'showm':'']"
      :style="{height:(showmbox?lexmorH:lexHeight)+'px'}"> -->
    <view class="lex_com_key" :class="showSelecProSub ? 'show' : ''" @touchmove.stop.prevent="stopPrevent">
      <view class="img-triangle" :style="{ left: technicianEvent + 'px' }" :class="showSelecProSub ? 'show' : ''">
      </view>
      <view class="box" :class="showSelecProSub ? 'show' : ''">
        <view>
          <view class="above-title flex  align-center padding-left-sm padding-right-sm">
            <!-- <view class="ableft">
              <text class="text-xl text-c3">请选择技师</text>
            </view> -->
            <view class="abright flex align-center justify-center">
              <text class=" text-lg zuikuai text-c6 point flex justify-center align-center text-white" v-for="(item,index) in recommend" :key="index"
                :class="{active:tiIndex == item.id}" @click="seleTj(item,index)">{{item.name}}</text>
              <!-- <text class=" text-df zuikuai text-c6 point flex align-center margin-right-xs"
                @click="seleTj">{{ tiIndex ? '按最快推荐' : '按项目' }}</text>
              <text class="text-white flex align-center justify-center cuIcon-right"></text> -->
            </view>
          </view>

          <!-- 按最快推荐 -->
          <block v-if="tiIndex == 0">
            <scroll-view class="ck_content" scroll-y="true" :show-scrollbar="true">
              <view class="tabs margin-bottom-sm">
                <tabs ref="tabsRef" :list="tablist" @tabItemClick="tabSelect" marright="30rpx" activeWeight='700'
                  :current="currentIndex" fontSize="32rpx" :height="34" barHeight="3" barMargin="0"
                  activeColor="#56BF7A" barWidth="30" activeBarColor="#56BF7A" unActi="#333"></tabs>
              </view>
              <view class="padding-left-sm padding-right-sm boxs ">
                <!-- 服务时间 -->
                <!-- <view class="box-height ggbg-height flex"  :style="{height:(showcscope?lexmorH:'60')+'px'}"> -->
                <view class="box-height flex"  :style="{height: showcscope ? lexmorH + 'rpx' : ''}">
                  <view class="xffwscope ggbg-height  flex justify-between con-bg gg-bgradiu">
                    <!-- :style="{lineHeight:(showcscope?lexmorH:'60')+'px'}" -->
                    <view class="text-c9 text-sm fwsj-w align-center xffw-posi gg-bgradiu">消费范围</view>
                    <view class="gg-bg flex flex-wrap gg-bgpadd gg-bgradiu">
                      <view class="minute flex align-center flex-direction xffw-w margin-top-sm "
                        v-for="(item, index) in xfwf" :class="{active:item.selec}" :key="index"
                        @click.stop="switchFn(item,xfwf)">
                        <view style="" class="flex align-center">
                          <text class="font-xxxs">￥</text>
                          <view class="text-df flex align-center">
                            <text>{{item.min}}</text>
                            <text v-if="item.max" class="acon-a-05 text-ms2"></text>
                            <text class="font-xxxs" v-if="item.max">￥</text>{{item.max}}
                          </view>
                        </view>
                        <view class="text-c9 font-xxxs">{{item.title}}</view>
                      </view>
                      <!--  <uni-transition :show="showcscope" :duration="400" mode-class="slide-top"> -->
                      <!-- <view class="flex minute-an" :class="{show:showcscope}">
                          <view class="minute flex align-center flex-direction xffw-w margin-top-sm "  v-for="(item, index) in xfwf.slice(3, xfwf.length)"
                            :class="{active:item.selec}" :key="index" @click.stop="switchFn(item,xfwf)">
                            <view style="" class="flex align-center">
                              <text class="font-xxxs">￥</text>
                              <view class="text-df flex align-center">
                                <text>{{item.min}}</text>
                                <text v-if="item.max" class="acon-a-05 text-ms2"></text>
                                <text class="font-xxxs" v-if="item.max">￥</text>{{item.max}}
                              </view>
                            </view>
                            <view class="text-c9 font-xxxs">{{item.title}}</view>
                          </view>
                        </view> -->

                      <!-- </uni-transition> -->

                      <view class="cuIcon-right rotateStyle text-df  cscope text-c9" @click="openHeight"
                        :class="{'active': showcscope}"></view>
                    </view>
                  </view>

                  <!-- <view class="upper-time flex justify-between align-center">
                  <view class="text-c9 text-sm fwsj-w">服务时间</view>
                  <view class="gg-bg flex  pggmar">
                    <text class="minute flex align-center  fwtime-padd" v-for="(item,index) in fwtime"
                      :class="{active:item.selec}" :key="index" @click.stop="switchFn(item,fwtime)">{{item.text}}</text>
                  </view>
                </view> -->
                  <!-- 消费范围 -->

                </view>
                <!-- 技师性别 -->
                <view class="jishisex flex justify-between align-center margin-top-sm con-bg">
                  <view class="text-c9 text-sm fwsj-w">技师性别</view>
                  <view class="gg-bg flex  pggmar">
                    <text class="minute flex align-center  fwtime-padd" v-for="(item,index) in jissex"
                      :class="{active:item.selec}" :key="index" @click.stop="switchFn(item,jissex)">{{item.text}}</text>
                  </view>
                </view>
                <!-- 技师人数 -->
                <view class="jsnunber flex justify-between align-center margin-top-sm con-bg">
                  <view class="text-c9 text-sm fwsj-w">技师人数</view>
                  <view class="gg-bg flex  pggmar justify-between">
                    <text class="minute flex align-center  fwtime-padd" v-for="(item,index) in jsnumber"
                      :class="{active:item.selec}" :key="index"
                      @click.stop="switchFn(item,jsnumber)">{{item.text}}</text>
                  </view>
                </view>
                <!-- 技师级别 -->
                <!--   <uni-transition :show="showExpandedHeat" :duration="400" mode-class="fade"> -->
                <view class="upper-time"  :style="{height:(showExpandedHeat?'130':'0')+'rpx',opacity:(showExpandedHeat?'1':'0')}">
                  <view class="level-h flex justify-between align-center  margin-top-sm con-bg" >
                    <view class="text-c9 text-sm fwsj-w">技师级别</view>
                    <view class="gg-bg flex  pggmar justify-between">
                      <text class="minute flex align-center   fwtime-padd" v-for="(item,index) in level"
                        :class="{active:item.selec}" :key="index"
                        @click.stop="switchFn(item,level)">{{item.text}}</text>
                    </view>
                  </view>
                </view>
                <!-- </uni-transition> -->
                <view class="more text-df text-c9 flex justify-center align-center margin-top margin-bottom"
                  @click="launchHeat">
                  更多<text class="cuIcon-right rotateStyle text-df margin-left-xs"
                    :class="{'active': showExpandedHeat}"></text>
                </view>
              </view>
              <!-- <view class="lower-btn flex justify-between padding-left padding-right align-center margin-top-sm">
                <view class="text-c6 text-df" @click="toggleslc(false)">关闭</view>
                <view class="addstyle flex text-white justify-center align-center" @click="toggleslc(false)">加入</view>
              </view> -->
            </scroll-view>
          </block>
          <block v-else>
            <view class="padding-left-sm padding-right-sm boxs seProject-left">
              <view class="seProject flex justify-between">
                <view class="leftcon">
                  <scroll-view class="VerticalNavscoll nav xm-left padding-top-sm padding-bottom-sm" scroll-y
                    scroll-with-animation>
                    <view v-for="(item,index) in list" :key="index" class="sc_item" :data-id="item.id"
                      @click.stop="tabLeftMenu($event,index,item,'','','','clicks')">
                      <view class="par_item flex flex-direction" :class="{active:stabCur == index}">
                        <view class="text-c3 text-df" :class="{white:stabCur == index}">{{item.name}}</view>
                        <!-- <view class="badges" v-if="item.num">
                          	<uni-badge class="uni-badge-left-margin total" :offset="[8,-15]":text="item.num" absolute="rightTop"  size="small"></uni-badge>
                          </view> -->
                        <view class="flex align-center margin-top-xs moreyColor" :class="{white:stabCur == index}">
                          <text class="text-xs">￥</text>
                          <view class="text-df flex align-center">
                            <text>{{item.min}}</text>
                            <text v-if="item.max" class="acon-a-05 text-ms2"></text>
                            <text class="text-xs" v-if="item.max">￥</text>{{item.max}}
                          </view>
                        </view>
                      </view>
                      <view class="p_rlt vbmbox" :style="`height:${item.height}px`">
                        <view class="vbmain" :id="'lefid' + index">
                          <view class="view-box-chindred" :class="it.nsell_category_id==stabCurs?'childrenActive':''"
                            v-for="(it,ind) in item.children" :key="ind" :data-id="it.nsell_category_id"
                            @click.stop="tabLeftSubMenu($event,ind,it,'clicks')">
                            <view class="childs_box">
                              <view class="box_lefts">
                                {{it.name}}
                                <view class="flex align-center justify-center"
                                  :class="it.nsell_category_id!=stabCurs?'textCors':''">
                                  <text class="text-xs">￥</text>
                                  <text>{{it.min}}</text>
                                </view>
                              </view>
                              <view class="box_right_icos" v-if="it.nsell_category_id==stabCurs">
                                <text class="acon-xuanzhong"></text>
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </scroll-view>
                </view>
                <view class="xm-con-r">
                  <view class="gjjishi flex align-center text-df text-c6">高级技师</view>
                  <scroll-view class="xm-right nav" scroll-y scroll-with-animation :scroll-into-view="'main-'+mainCur"
                    @scroll="VerticalMain">
                    <view class="flex   flex-wrap " v-for="(items,indexs) in shopist" :key="indexs"
                      style="position: relative;" :id="'main-'+items.id">
                      <view class="cu-bar flex margin-bottom margin-top" v-for="(item,index) in items.sgoodsList"
                        :key="index">
                        <view class="flex flex-direction jishiyyyue-w marnth2">
                          <view class="imgtop">
                            <image :src="item.imgsrc" mode=""></image>
                          </view>
                          <view class="textcenter flex justify-between padding-top-xxs">
                            <view class="vipPrice flex flex-direction align-center">
                              <text class="text-c3 text-bold text-df">￥{{item.vipPrice}}</text>
                              <text class="text-c9 text-xs margin-top-xxs">会员价</text>
                            </view>
                            <view class="ccxPrice flex flex-direction align-center">
                              <text class="text-c3 text-bold text-df">￥{{item.xcxPrice}}</text>
                              <text class="text-c9 text-xs  margin-top-xxs">小程序价</text>
                            </view>
                            <view class="fj-statue flex justify-between align-center padding-xs" :class="{xian:true}">
                              <text class="circular flex"></text>
                              <text class="text-xs">闲</text>
                            </view>
                          </view>
                          <view class="addbtn flex justify-end">
                            <uni-number-box class="numbx priceCommon" v-model="item.num" :min="0" :max="10"
                              :allowInput="true" margin="0 -7rpx" @changes="changeNum" :sku="item"
                              @getEvn="addNumCar($event, item)" />
                          </view>
                        </view>
                      </view>
                    </view>
                  </scroll-view>
                </view>
              </view>

            </view>
          </block>
          <view class="lower-btn flex justify-between padding-left padding-right align-center margin-top-sm"
            :class="showSelecProSub ? 'show' : ''">
            <view class="text-c6 text-df" @click="addCard(false)">关闭</view>
            <view class="addstyle flex text-white justify-center align-center" @click="addCard(true,$event)">加入</view>
          </view>
        </view>



      </view>
    </view>
    <!-- <view class="ballShow">
    	<carShow ref="ballRef" :duration="700" :size="30" />
    </view> -->
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, nextTick, getCurrentInstance } from 'vue'
  import { showLoading, hideLoading, mnavTo, trailingThrottle, checkLogin, getCurRoute, getSystemPhoneX, checkOrg } from '@/utils/helper';
  import carShow from '@/uni_modules/lime-ball/components/l-ball/l-ball.vue'
  import tabs from '@/components/comtabs/comtabs.vue'
  const emit = defineEmits(["confirm", "getEvent"])
  const showSelecProSub = ref(false)
  const showmbox = ref(false)
  const lexmorH = ref(0)
  const lexHeight = ref(0)
  const showMd = ref(false) //更多条件
  const show_Md = ref(null) //更多条件
  // const tiIndex = ref(0)
  const tiIndex = ref(false)
  const showExpandedHeat = ref(null)  //展示更多
  const showcscope = ref(null)
  const load = ref(true)
  const technicianlevelH = ref(0)
  const recommend = ref([
    {
      id: 0,
      name: '按金额'
    },
    {
      id: 1,
      name: '按项目'
    }]
  )

  const list = ref<any>([
    {
      id: 148,
      parentIds: 182,
      imgurl: '',
      name: '实惠的',
      showChild: false,
      min: '120',
      max: '140',
      num: 3,
      height: 0,
      children: [
        {
          nsell_category_id: -186,
          nparent_sell_category_id: 185,
          name: '实惠的',
          min: '150',
          max: '180',
        }
      ]
    },
    {
      id: 141,
      parentIds: 183,
      imgurl: '',
      name: '本店最好的',
      showChild: false,
      min: '150',
      max: '180',
      num: 0,
      height: 0,
      children: [
        {
          nsell_category_id: -186,
          nparent_sell_category_id: 185,
          name: '实惠的',
          min: '150',
          max: '180',
        }
      ]
    },
    {
      id: 185,
      parentIds: 186,
      imgurl: '',
      name: '最便宜的',
      showChild: false,
      min: '80',
      num: 0,
      height: 0,
      children: [
        {
          nsell_category_id: 186,
          nparent_sell_category_id: 185,
          name: '高级技师',
          min: '150',
          max: '180',
        },
        {
          nsell_category_id: 187,
          nparent_sell_category_id: 185,
          name: '五星技师',
          min: '150',
          max: '180'
        }
      ],
    },
    {
      id: 171,
      parentIds: 172,
      imgurl: '',
      name: '最贵的',
      showChild: false,
      min: '600',
      num: 0,
      height: 0,
      children: [
        {
          nsell_category_id: 172,
          nparent_sell_category_id: 171,
          name: '高级技师',
          min: '150',
          max: '180',
        },
        {
          nsell_category_id: 173,
          nparent_sell_category_id: 171,
          name: '五星技师',
          min: '150',
          max: '180'
        }
      ],
    }

  ])

  const shopist = ref<any>([
    {
      id: 182,
      parentid: 183,
      sgoodsList: [
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
          statue: 1, //1闲
          vipPrice: 120,
          xcxPrice: 140,
          num: 0,
          goodsId: 'dasdas45645ss',
        },
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
          statue: 1, //1闲
          vipPrice: 180,
          xcxPrice: 140,
          num: 0,
          goodsId: 'asdasdas4564',
        }, {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
          statue: 1, //1闲
          vipPrice: 120,
          xcxPrice: 140,
          num: 0,
          goodsId: '989789dasda',
        },
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
          statue: 1, //1闲
          vipPrice: 180,
          xcxPrice: 140,
          num: 0,
          goodsId: '9898987987',
        }
      ]
    },
    {
      id: 142,
      parentid: 172,
      sgoodsList: [
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
          statue: 2, //1闲
          vipPrice: 220,
          xcxPrice: 240,
          num: 0,
          goodsId: '45646546546',
        },
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
          statue: 2, //1闲
          vipPrice: 280,
          xcxPrice: 240,
          num: 0,
          goodsId: '4454123123',
        }, {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
          statue: 2, //1闲
          vipPrice: 220,
          xcxPrice: 240,
          num: 0,
          goodsId: '4566123123',
        },
        { 
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
          statue: 2, //1闲
          vipPrice: 280,
          xcxPrice: 240,
          num: 0,
          goodsId: '45464',
        }
      ]
    },
    {
      id: 187,
      parentid: 167,
      sgoodsList: [
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
          statue: 3, //1闲
          vipPrice: 320,
          xcxPrice: 340,
          num: 0,
          goodsId: '254523123',
        },
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
          statue: 1, //1闲
          vipPrice: 380,
          xcxPrice: 340,
          num: 0,
          goodsId: '22315523',
        }, {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
          statue: 1, //1闲
          vipPrice: 320,
          xcxPrice: 340,
          num: 0,
          goodsId: '2135123',
        },
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
          statue: 1, //1闲
          vipPrice: 380,
          xcxPrice: 340,
          num: 0,
          goodsId: '223123',
        }
      ]
    },
    {
      id: 186,
      parentid: 182,
      sgoodsList: [
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
          statue: 1, //1闲
          vipPrice: 420,
          xcxPrice: 440,
          num: 0,
          goodsId: '123123',
        },
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
          statue: 1, //1闲
          vipPrice: 480,
          xcxPrice: 440,
          num: 0,
          goodsId: '1231231',
        }, {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
          statue: 1, //1闲
          vipPrice: 420,
          xcxPrice: 440,
          num: 0,
          goodsId: '1231235',
        },
        {
          imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
          statue: 1, //1闲
          vipPrice: 480,
          xcxPrice: 440,
          num: 0,
          goodsId: '125555',
        }
      ]
    }
  ])

  // nparent_sell_category_id:父级id
  // nsell_category_id:子级自己的id(不能重复)
  // 联动:左侧菜单children中的nsell_category_id和商品列表id相等(是外层的)
  // const list = ref<any>([
  //   {
  //     id: 148,
  //     parentIds: 182,
  //     imgurl: '',
  //     name: '实惠的',
  //     showChild: false,
  //     min: '120',
  //     max: '140',
  //     num: 3,
  // 	height:0,
  // 	children:[
  // 		{
  // 			nsell_category_id: 182, //子级自己的id(不能重复) 和商品列表id相等(是外层的)
  // 			nparent_sell_category_id: 148, //父级ID
  // 			name: '实惠的',
  // 			min: '150',
  // 			max: '180',
  // 		}
  // 	]
  //   },
  //   {
  //     id: 141,
  //     parentIds: 183,
  //     imgurl: '',
  //     name: '本店最好的',
  //     showChild:false,
  //     min: '150',
  //     max: '180',
  //     num: 0,
  // 	height:0,
  // 	children:[
  // 		{
  // 			nsell_category_id: 142,
  // 			nparent_sell_category_id: 141,
  // 			name: '实惠的',
  // 			min: '150',
  // 			max: '180',
  // 		}
  // 	]
  //   },
  //   {
  //     id: 185,
  //     parentIds: 186,
  //     imgurl: '',
  //     name: '最便宜的',
  //     showChild: false,
  //     min: '80',
  //     num: 0,
  // 	height:0,
  // 	children: [
  // 	  {
  // 	    nsell_category_id: 186,
  // 	    nparent_sell_category_id: 185,
  // 	    name: '高级技师',
  // 	    min: '150',
  // 	    max: '180',
  // 	  },
  // 	  {
  // 	    nsell_category_id: 187,
  // 	    nparent_sell_category_id: 185,
  // 	    name: '五星技师',
  // 	    min: '150',
  // 	    max: '180'
  // 	  }
  // 	],
  //   },
  //   {
  //     id: 171,
  //     parentIds: 172,
  //     imgurl: '',
  //     name: '最贵的',
  //     showChild: false,
  //     min: '600',
  //     num: 0,
  // 	height:0,
  // 	children: [
  // 	  {
  // 	    nsell_category_id: 186,
  // 	    nparent_sell_category_id: 171,
  // 	    name: '高级技师',
  // 	    min: '150',
  // 	    max: '180',
  // 	  },
  // 	  {
  // 	    nsell_category_id: 186,
  // 	    nparent_sell_category_id: 171,
  // 	    name: '五星技师',
  // 	    min: '150',
  // 	    max: '180'
  // 	  }
  // 	],
  //   }

  // ])

  // const shopist = ref<any>([  
  //   {
  //     id: 182,
  //     parentid: 183,
  //     sgoodsList: [
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
  //         statue: 1, //1闲
  //         vipPrice: 120,
  //         xcxPrice: 140,
  //         num:0,
  //         goodsId:'dasdas45645ss',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
  //         statue: 1, //1闲
  //         vipPrice:180,
  //         xcxPrice: 140,
  //         num:0,
  //         goodsId:'asdasdas4564',
  //       }, {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
  //         statue: 1, //1闲
  //         vipPrice: 120,
  //         xcxPrice: 140,
  //         num:0,
  //         goodsId:'989789dasda',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
  //         statue: 1, //1闲
  //         vipPrice: 180,
  //         xcxPrice: 140,
  //         num:0,
  //         goodsId:'9898987987',
  //       }
  //     ]
  //   },
  //   {
  //     id: 142,
  //     parentid: 172,
  //     sgoodsList: [
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
  //         statue: 2, //1闲
  //         vipPrice: 220,
  //         xcxPrice: 240,
  //         num:0,
  //         goodsId:'45646546546',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
  //         statue: 2, //1闲
  //         vipPrice: 280,
  //         xcxPrice: 240,
  //         num:0,
  //         goodsId:'4454123123',
  //       }, {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
  //         statue: 2, //1闲
  //         vipPrice: 220,
  //         xcxPrice: 240,
  //         num:0,
  //         goodsId:'4566123123',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
  //         statue: 2, //1闲
  //         vipPrice: 280,
  //         xcxPrice: 240,
  //         num:0,
  //         goodsId:'45464',
  //       }
  //     ]
  //   },
  //   {
  //     id: 187,
  //     parentid: 167,
  //     sgoodsList: [
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
  //         statue: 3, //1闲
  //         vipPrice: 320,
  //         xcxPrice: 340,
  //         num:0,
  //         goodsId:'254523123',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
  //         statue: 1, //1闲
  //         vipPrice:380,
  //         xcxPrice:340,
  //         num:0,
  //         goodsId:'22315523',
  //       }, {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
  //         statue: 1, //1闲
  //         vipPrice: 320,
  //         xcxPrice: 340,
  //         num:0,
  //         goodsId:'2135123',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
  //         statue: 1, //1闲
  //         vipPrice: 380,
  //         xcxPrice: 340,
  //         num:0,
  //         goodsId:'223123',
  //       }
  //     ]
  //   },
  //   {
  //     id: 186,
  //     parentid: 182,
  //     sgoodsList: [
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png',
  //         statue: 1, //1闲
  //         vipPrice: 420,
  //         xcxPrice: 440,
  //         num:0,
  //         goodsId:'123123',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img02.png',
  //         statue: 1, //1闲
  //         vipPrice:480,
  //         xcxPrice: 440,
  //         num:0,
  //         goodsId:'1231231',
  //       }, {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img03.png',
  //         statue: 1, //1闲
  //         vipPrice: 420,
  //         xcxPrice: 440,
  //         num:0,
  //         goodsId:'1231235',
  //       },
  //       {
  //         imgsrc: 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img04.png',
  //         statue: 1, //1闲
  //         vipPrice: 480,
  //         xcxPrice: 440,
  //         num:0,
  //         goodsId:'125555',
  //       }
  //     ]
  //   }
  // ])

  const fwtime = ref([
    {
      text: '60分钟',
      selec: false
    },
    {
      text: '90分钟',
      selec: true
    }
  ])

  const xfwf = ref([
    {
      min: '130',
      max: '140',
      title: '实惠',
      selec: false
    },
    {
      min: '150',
      max: '180',
      title: '大多数人首选',
      selec: true
    },
    {
      min: '238',
      max: '258',
      title: '本店最好的',
      selec: false
    },
    {
      min: '130',
      title: '最便宜的',
      selec: false
    },
    {
      min: '258',
      title: '最贵的',
      selec: false
    }
  ])

  const jissex = ref([
    {
      text: '不限',
      selec: true
    },
    {
      text: '男',
      selec: false
    },
    {
      text: '女',
      selec: false
    }
  ])

  const jsnumber = ref([
    {
      text: '1',
      selec: false
    },
    {
      text: '2',
      selec: true
    },
    {
      text: '3',
      selec: false
    },
    {
      text: '4',
      selec: false
    },
    {
      text: '5',
      selec: false
    },
    {
      text: '6',
      selec: false
    }
  ])

  const level = ref([
    {
      text: '不限',
      selec: false
    },
    {
      text: '优秀',
      selec: true
    },
    {
      text: '高级',
      selec: false
    },
    {
      text: '特级',
      selec: false
    }
  ])
  const tablist = ref([
    {
      orderState: 'all',
      id: 0,
      name: "60分钟"
    }, {
      orderState: '142',
      id: 1,
      name: "90分钟"
    }
  ])
  const tabsRef = ref()
  const currentIndex = ref(0)

  const tabSelect = (item : any, index : any) => {
    currentIndex.value = item.id
    if (index === 1) {

      // imgliINdex.value = -1
      // technician.value.toggleslc(false)
    } else {

    }
  }
  const selectCountData = computed(() => {
    let num = 0, seleNUm = 0;
    shopist.value.forEach(item => {
      item.shopist(citem => {
        if (citem.num > 0) {
          seleNUm += citem.num
        }
      })
    })

    const r = {
      seleNUm
    }

    console.log('slslslsl+', r)

    return r

  })
  const morFeatList = ref([])
  // 点击左侧菜单
  const stabCur = ref(0)
  const seleTj = (item : any, index : any) => {
    tiIndex.value = item.id
  }
  // const seleTj = () => {
  //   tiIndex.value = !tiIndex.value
  // }
  // const initLexH = () => {
  //   showSelecProSub.value = true
  //   lexHeight.value = 0
  //   setTimeout(() => {
  //     uni.createSelectorQuery().select('.p_rlt').fields({
  //       size: true
  //     }, (res : any) => {
  //       let maxh = uni.upx2px(730), nh = maxh, mh = maxh
  //       if (res) {
  //         nh = res.height + uni.upx2px(300)//80+70+40
  //         nh > maxh ? nh = maxh : ''
  //       }
  //       // mh = morFeatList.value.length <= 0 ? 0 : morFeatList.value.length > 0 && morFeatList.value.length <= 3 ? 120 : morFeatList.value.length > 3 && morFeatList.value.length <= 6 ? 220 : 320
  //       mh = uni.upx2px(mh) + nh
  //       mh > maxh ? mh = maxh : ''
  //       lexHeight.value = nh
  //       lexmorH.value = mh
  //       !showSelecProSub.value ? toggleslc(true) : '';
  //       console.log('lexHeight', maxh, mh, nh, res)
  //     }).exec();
  //   }, 10);
  // }
  const eventData = ref('')
  const props = defineProps({
    technicianEvent: {
      type: Number || String,
      default: 100
    },
  })
  // +-数量按钮
  const changeNum = (e : any) => {
    console.log('changeNum', e)
  }


  const addNumCar = (e : any, item : any) => {
    emit("getEvent", { event: e, item: item })
  }

  const addCard = (v : any, event ?: any) => {
    emit("confirm", { statue: false, add: v, e: event })
  }

  const toggleslc = (value : any) => {
    showSelecProSub.value = value
    // showmbox.value ? showmbox.value = false : '';
    // // 暂
    // showMd.value ? showMd.value = false : '';
    // show_Md.value ? show_Md.value = null : '';
  }

  const switchFn = (item : any, data : any) => {
    data.forEach(item => {
      item.selec = false
    })
    item.selec = true
  }

  const close = () => {
    console.log('测试---------------------')
  }


  const curQuery = ref<any>(null);
  const opneQuery = ref<any>(null);
  const curQueryClick = ref(null)
  const levelQuery = ref<any>(null);
  onMounted(() => {
    let instance = getCurrentInstance();
    curQuery.value = uni.createSelectorQuery().in(instance);
    opneQuery.value = uni.createSelectorQuery().in(instance);
    curQueryClick.value = uni.createSelectorQuery().in(instance);
    levelQuery.value = uni.createSelectorQuery().in(instance);
  })

  const tabSelecLeft = (e : any, index : any, item : any = {}, shopId : any, isHid : any, source : any = '', shockSource : any = '') => {
    let isCf = stabCur.value == index ? true : false
    stabCur.value = index;

    if (
      ((item.children?.length > 0 && (Number(item.children[0].nsell_category_id) < 0 || Number(shopId) < 0)) ||
        (item.children?.length == 1 && item.name == item.children[0].vname)) && !isCf
    ) {
      let e = {
        currentTarget: {
          dataset: {
            id: item.children[0].nsell_category_id
          }
        }
      };
      changescIndex(e, "", "");
    }

    if (item.children && item.children.length == 0) {
      let e = {
        currentTarget: {
          dataset: {
            id: item.id
          }
        }
      };
      changescIndex(e, "", "");
    }
    list.value[index].showChild = !list.value[index].showChild
    //当前锚点和菜单展开规则-同炖大侠一致(预约按需求修改)
    //1、左侧菜单至少要有一个子级(即children的长度必须大于1)
    //2、接口返回nsell_category_id为负数的场景: 后台固定的菜单(如顿大侠的 热销、常点为后台配置返回的负数)
    //3、在商品滑动的时候(即触发VerticalMain方法时)会主动把nsell_category_id设置为负数（即参数shopId）， 场景：当子级(children)的长度为1 并且 子级的名字和父级(最外层)的名字相同时
    //4、当点击菜单或者滑动商品列表时， nsell_category_id如果为负数 或者 子级(children)的长度为1并且子级的名字和父级(最外层)的名字相同时，height为0，不显示子级(即不展开菜单)，其他情况展开菜单显示子级
    //5、锚点规则：1、nsell_category_id如果为负数 或者 子级(children)的长度为1并且子级的名字和父级(最外层)的名字相同时，点击父级直接锚点定位到对应商品不展开菜单 2、其他情况点击父级只做展开菜单操作、展开后点击子级进行锚点
    if (list.value[index].showChild) {
      curQueryClick.value.select(('#lefid' + index)).boundingClientRect(); // 选择类名为my-element的元素
      curQueryClick.value.exec((res) => {
        if (res[0]) {
          if ((item && item.children && item.children.length > 0 && (Number(item.children[0].nsell_category_id) < 0) || (item && item.children && item.children.length == 1 && item.name == item.children[0].vname))) {
            list.value[index].height = 0
          } else if (Number(shopId) < 0) {
            list.value[index].height = 0
          } else {
            list.value[index].height = res[0].height
          }
        }
      });
    } else {
      // lefAnimationChange(0)
      console.log("fff")
      list.value[index].height = 0;
    }
    for (let i in list.value) {

      if (i != index) {
        list.value[i].showChild = false
        list.value[i].height = 0
      }
    }

  }

  const stabCurs = ref(0)
  const mainCur = ref(0)
  const verticalNavTop = ref(0)
  const changescIndex = (e : any, index : any, item : any, shockSource : any = '') => {
    stabCurs.value = e.currentTarget.dataset.id
    mainCur.value = e.currentTarget.dataset.id;
    verticalNavTop.value = (e.currentTarget.dataset.id - 1) * 50
  }

  const tabLeftMenu = trailingThrottle(tabSelecLeft, 80);

  const tabLeftSubMenu = trailingThrottle(changescIndex, 80);

  // const changeNum = (e) => {
  //   console.log(e)
  // }
  const VerticalMain = (e : any) => {
    mainCur.value = 0
    let tabHeight = 0;
    if (load.value) {
      for (let i = 0; i < shopist.value.length; i++) {
        curQuery.value = curQuery.value.select("#main-" + shopist.value[i].id).boundingClientRect();
        curQuery.value.exec((res) => {
          if (res[0]) {
            shopist.value[i].top = tabHeight;
            tabHeight = tabHeight + res[0].height;
            shopist.value[i].bottom = tabHeight;
          }
        });
      }
      load.value = false
    }
    let scrollTop = e.detail.scrollTop + 10;
    for (let i = 0; i < shopist.value.length; i++) {
      if (scrollTop > shopist.value[i].top && scrollTop < shopist.value[i].bottom) {
        verticalNavTop.value = (shopist.value[i].id - 1) * 50
        stabCurs.value = shopist.value[i].id
        const result = findParentIndexById(list.value, shopist.value[i].id)
        if (result !== null) {
          if (typeof list.value[result].height === 'undefined' || list.value[result].height == 0) {
            if (!(list.value[result].children && list.value[result].children.length == 1 && list.value[result].name == list.value[result].children[0].vname)) {
              tabSelecLeft("", result, "", shopist.value[i].id, 'hids')
            } else {
              tabSelecLeft("", result, "", "-" + shopist.value[i].id, 'hids')
            }

          }
        }
        return false
      }
    }
  }
  const findParentIndexById = (items : any, id : any) => {
    let result = null;
    items.forEach((parent : any, parentIndex : any) => {
      parent.children.forEach((child : any) => {
        if (child.nsell_category_id == id) {
          result = parentIndex;
        }
      });
    });
    return result;
  }
  const stopPrevent = () => { }
  const openHeight = () => {
    showcscope.value = !showcscope.value
    opneQuery.value.select(('.xffwscope')).boundingClientRect(); // 选择类名为my-element的元素
    // 执行查询并处理返回结果
    opneQuery.value.exec((res) => {
      if (res[0]) {
        let elementRect = res[0];
        let rpxValue = elementRect.height * 2
        lexmorH.value = rpxValue
        
        console.log(rpxValue,'rpx', lexmorH.value)
        
      } else {
        console.log('元素不存在或查询失败');
      }
    });
  }
  //展开更多
  const launchHeat = () => {
    showExpandedHeat.value = !showExpandedHeat.value
    // levelQuery.value.select(('.level-h')).boundingClientRect(); // 选择类名为my-element的元素
    // // 执行查询并处理返回结果
    // levelQuery.value.exec((res) => {
    //   if (res[0]) {
    //     let elementRect = res[0];
    //     technicianlevelH.value = elementRect.height
    //     console.log(technicianlevelH.value)
    //   } else {
    //     console.log('元素不存在或查询失败');
    //   }
    // });
  }

  defineExpose({ close, toggleslc })
</script>

<style lang="scss" scoped>
  .vbmbox {
    transition: height 0.2s ease-out;
    overflow: hidden;
  }

  .sc_item {
    width: 100%;
    text-align: center;
    margin: 0;
    border: none;
    min-height: 90rpx;
    position: relative;
    align-items: center;
    height: auto;
    // padding: 6rpx 0 6rpx 0;

    .par_item {
      width: 100%;
      min-height: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .moreyColor {
        color: #FF6D6D;
      }

      &.active {
        border-radius: 20rpx;
        background-color: #56BF7A;
      }
    }

    .white {
      color: #fff !important;
    }

    .par_item_item {
      flex: 1;
      position: relative;

      .menus_tags_box {
        display: flex;
        justify-content: flex-end;

        .menus_tags {
          max-width: calc(100% - 30rpx);
          overflow: hidden;
          height: 28rpx;
          border-radius: 30rpx 28rpx 28rpx 0;
          background: #F00;
          font-size: 16rpx;
          font-weight: 400;
          color: #fff;
          padding: 0 6rpx;
          margin-right: 30rpx;
          line-height: 28rpx;
          text-align: center;
        }
      }

    }

    .cur {
      background-color: #fff;
      color: #648C6A;
      text-align: center;
      font-family: "Microsoft YaHei UI";
      font-size: 28rpx;
      font-style: normal;
      font-weight: 700;
      background-color: #53A87F;
      width: 14rpx;
      height: 120rpx;

    }

    // .cur::after {
    // 			content: "";
    // 			width: 8rpx;
    // 			// height: 105.6rpx;
    // 			height:calc(100% - calc(100% - 105rpx));
    // 			position: absolute;
    // 			background-color: #53A87F;
    // 			top: 0rpx;
    // 			left: 0rpx;
    // 			bottom: 0;
    // 		}
    // .cur::after {
    // 	content: "";
    // 	width: 8rpx;
    // 	// height: 105.6rpx;
    // 	height:calc(100% - calc(100% - 105rpx));
    // 	position: absolute;
    // 	background-color: #53A87F;
    // 	top: 0rpx;
    // 	left: 0rpx;
    // 	bottom: 0;
    // }

    .uncur {
      color: #666;
      text-align: center;
      font-family: "Microsoft YaHei UI";
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      width: 14rpx;
      height: 120rpx;
    }
  }

  .sc_item:nth-child(n+2) {
    margin-top: 30rpx;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 120rpx;
      height: 2rpx;
      background-color: #F0F0FF;
      top: -15rpx;
    }
  }

  .par_itemline {
    margin-top: 30rpx;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 120rpx;
      height: 2rpx;
      background-color: #F0F0FF;
      top: -15rpx;
    }
  }

  .rotateStyle {
    transform: rotate(90deg);
    display: inline-block;
    transition: all .3s linear;

    &.active {
      transform: rotate(-90deg);
      transition: all .3s linear;
    }
  }

  // 条件弹窗-s
  .lex_sc {
    width: 100%;
    height: 103rpx; //70 80

    // padding:0 0 0 20rpx;
    &.tim {
      background: #fff;
      border-radius: 20rpx 20rpx 0 0;
      height: auto;
      min-height: 150rpx; //108
      // margin-top: 4rpx;
      padding-left: 16rpx;
    }
  }

  .lex_com_key {
    background: transparent;
    position: absolute;
    width: 712rpx;
    left: 50%; //440
    transform: translateX(-50%);
    top: 430rpx;
    /* Drop card */
    // box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
    z-index: 9999;
    // margin-top: -2rpx;
    height: 0;
    opacity: 0;
    // opacity: 1;
    // margin-top: -532rpx;

    // height: 860rpx;
    // transform: scale(0.9);
    transform-origin: top top;
    pointer-events: none;
    transition: all 0.16s ease-out;
    overflow: hidden;

    // .box{
    //   margin-top: 20rpx;
    //   background-color: #fff;
    //   height: 100%;
    //   border-radius: 20rpx;
    // }
    .box {
      background: #ffffff;
      border-radius: 20rpx;
      margin-top: 20rpx;
      padding-bottom: 10rpx;
      height: 0;
      opacity: 0;

      &.show {
        pointer-events: all;
        // transition: all 0.36s ease-out;
        transition: all 0.16s ease-out;
        opacity: 1;
        z-index: 999;
        // overflow: hidden;
        // height: 850rpx;
        height: calc(100% - 20rpx);
        /* #ifdef H5 */
        height: calc(100% - 20rpx);
        /* #endif */
      }

      // height: 850rpx;
    }

    .above-title {
      background: linear-gradient(180deg, #E4FEEE 40%, #FFF 93.61%);
      height: 100rpx;
      border-radius: 20rpx 20rpx 0 0;

      .abright {
        height: 100%;
        width: 100%;
        .cuIcon-right {
          width: 30rpx;
          height: 30rpx;
          background-color: #56BF7A;
          border-radius: 50%;
          font-size: 20rpx;
        }

        .zuikuai {
          height: 100%;
          width: 182rpx;
          height: 60rpx;
          &.active{
            border-radius: 35px;
            background: rgba(86, 191, 122, 0.7);
            font-size: 36rpx;
            color: white;
          }
          &:last-child {
            margin-left: 40rpx;
          }

        }
      }
    }

    // &::after {
    //   content: '';
    //   position: absolute;
    //   bottom: 100%;
    //   /* 将三角形放在上方 */
    //   left: 80rpx;
    //   /* 三角形的水平位置，可以根据需要调整 */
    //   width: 0;
    //   height: 0;
    //   border-left: 15rpx solid transparent;
    //   /* 三角形的左边 */
    //   border-right: 15rpx solid transparent;
    //   /* 三角形的右边 */
    //   border-bottom: 15rpx solid red;
    //   /* 三角形的颜色 */
    //   z-index: 9999;
    // }
    &.show {
      pointer-events: all;
      // transition: all 0.16s ease-out;
      transition: all 0.36s ease-out;
      opacity: 1;
      // margin-top: 0;
      z-index: 999;
      // overflow: hidden;
      // height: 860rpx;
      height: calc(100vh - 500rpx);
      /* #ifdef H5 */
      height: calc(100vh - 650rpx);
      /* #endif */

      &.h0 {
        height: 450rpx; //420

        &.showm {
          height: 660rpx;
        }
      }

      &.h1 {
        height: 530rpx;

        &.showm {
          height: 630rpx;
        }
      }

      &.h2 {
        height: 450rpx; //360

        &.showm {
          height: 550rpx; //468
        }
      }
    }

    &.anifade {
      .lex_rv_box {
        animation-name: fadebox;
        animation-duration: 0.2s;
        animation-timing-function: linear;
      }
    }

    .lex_rv_box {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .cktit {
      min-width: 90rpx;
    }

    .lh_xs {
      line-height: 1.3;
    }

    .padding-lr-xxs {
      padding: 0 6rpx;
    }

    .ck_firbox {
      height: 76rpx; //90 70 80
      line-height: 77rpx;

    }

    .genderClitem {
      // width: 100%; //444 450 378
      height: 76rpx; //80
      padding: 0; //16 20

      &.lev {
        height: 80rpx; //80
        padding-left: 20rpx;
      }

      .act {
        font-weight: bold;
        color: #56bf7a;
      }

      .active {
        .ckimg {
          border: 1px solid #56bf7a;
        }
      }
    }

    .ckimg {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      border: 1px solid transparent;
    }

    .ckstext {
      position: absolute;
      right: 22rpx;
      bottom: 6rpx;
      width: 40rpx;
      height: 40rpx;
      // line-height: 41rpx;
      border-radius: 50%;
      background: #699CFF;
      z-index: 2;

      &.wm {
        background: #FF61DC;
      }
    }

    .gclibox {
      width: 106rpx;
      vertical-align: middle;
    }

    .s_r {
      &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 70rpx;
        width: 1px;
        background: #fff;
      }
    }
  }

  .lower-btn {
    margin-bottom: 30rpx;

    // z-index: 999;
    .addstyle {
      width: 320rpx;
      height: 80rpx;
      border-radius: 46rpx;
      background: #56BF7A;
    }

    // opacity: 0;
    // transform-origin: top top;
    // pointer-events: none;
    // transition: all 0.26s ease-out;
    // &.show{
    //    opacity: 1;
    //    transition: all 1s ease-out;
    // }
  }

  .gg-bg {
    border-radius: 0 20rpx 20rpx 0;
    padding: 0rpx 20rpx 20rpx 20rpx;
    background: rgba(243, 245, 249, 0.80);
    flex: 1;
    position: relative;

    .minute-an {
      height: 0;
      opacity: 0;
      background: transparent;
      height: 0;
      opacity: 0;
      transform-origin: top top;
      pointer-events: none;
      transition: all 0.26s ease-out;

      &.show {
        opacity: 1;
        height: 51px;
        transition: all 0.26s ease-out;
      }
    }

    &.gg-bgpadd {
      padding: 0rpx 20rpx 20rpx 5rpx;
    }

    .cscope {
      position: absolute;
      right: 8rpx;
      top: 40rpx;
    }

    .xffw-w {
      padding: 5rpx 0rpx;
      width: 176rpx;
    }

    .fwtime-padd {
      padding: 10rpx 30rpx;
    }

    .minute {
      border: 1px solid transparent;

      &.active {
        border-radius: 40px;
        border: 1px solid #56BF7A;
        background: rgba(86, 191, 122, 0.20);
      }
    }
  }

  .gg-bgradiu {
    border-radius: 0 !important;
  }

  .box-height {
    position: relative;
    height:110rpx;
    transition: all 0.26s ease-out;
    overflow: hidden;
    border-radius: 20rpx;
  }

  .upper-time {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: all 0.26s ease-out;
  }

  .ggbg-height {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding-left: 100rpx !important;

    // &.show{
    //   transition: all 0.36s ease-out;
    // }
    .xffw-posi {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      padding-top: 30rpx;
      // transition: all 0.36s ease-out;
    }
  }

  .fwsj-w {
    height: 100%;
    width: 100rpx;
  }

  .con-bg {
    background-color: #f9fbfc;
    border-radius: 20rpx;
    padding: 0 5rpx 0 5rpx;
  }

  .pggmar {
    padding-top: 20rpx;
  }

  .ck_content {
    min-height: 198rpx;
    height: calc(100vh - 750rpx); //80+70+40+100
    /* #ifdef H5 */
    height: calc(100vh - 900rpx); //80+70+40+100
    /* #endif */
  }

  .text-ms2 {
    font-size: 14rpx;
  }

  .seProject {
    height: calc(100vh - 750rpx); //80+70+40+100
    /* #ifdef H5 */
    height: calc(100vh - 900rpx); //80+70+40+100
    /* #endif */
    .xm-left {
      height: 100%;
      border-radius: 10rpx;
      background: rgba(243, 243, 255, 0.50);
      width: 160rpx;
    }
  }

  .badges {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    right: 0;
    top: 6rpx;
  }

  // .VerticalNav {
  //   height: 100%;
  // }

  .gjjishi {
    width: 508rpx;
    margin-left: 16rpx;
    padding-left: 20rpx;
    height: 54rpx;
    border-radius: 10rpx;
    background: rgba(243, 243, 255, 0.50);
  }

  .xm-right {
    height: calc(100% - 60rpx) !important;
    flex: 1;
    margin-left: 20rpx;

    .cu-bar {
      margin-right: 10%;

      &:nth-child(2n) {
        margin-right: 0;
      }

    }
  }

  .jishiyyyue-w {
    width: 204rpx;
    position: relative;

    .xian {
      color: #53A87F;
    }

    .fj-statue {
      position: absolute;
      width: 54rpx;
      height: 26rpx;
      border-radius: 0px 10rpx;
      background: rgba(255, 255, 255, 0.75);
      right: 0;
      top: 0;

      .circular {
        width: 7rpx;
        height: 7rpx;
        border-radius: 50%;
        background: #56BF7A;
      }
    }

    .imgtop {
      image {
        width: 204rpx;
        height: 196rpx;
        border-radius: 10rpx;
        background: rgba(172, 140, 128, 0.30);
      }
    }
  }

  .view-box-chindred {
    color: #666;
    text-align: center;
    font-size: 25rpx;
    font-style: normal;
    font-weight: 400;
    min-height: 80rpx;
    height: auto;
    margin-top: 10rpx;

    .childs_box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .box_lefts {
        width: calc(100% - 20rpx);
        height: 100%;
        text-align: center;
      }

      .box_right_icos {
        width: 14rpx;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50rpx;
        transform: rotate(270deg);
        margin-right: 5rpx;
      }
    }
  }

  .childrenActive {
    color: #648C6A;
    font-size: 28rpx;
    text-align: center;
    width: 100%;
    height: 100%;
  }

  .textCors {
    color: #FF6D6D;
  }

  // .ballShow {
  // 	width: 100rpx;
  // 	height: 40rpx;
  // 	position: fixed;
  // 	bottom: 40rpx;
  // 	left: 180rpx;
  // 	// z-index: 999;
  // }
  .img-triangle {
    position: absolute;
    top: 0;
    /* 将三角形放在上方 */
    left: 50%;
    transform: translateX(-50%);
    /* 三角形的水平位置，可以根据需要调整 */
    width: 0;
    height: 0;
    border-left: 25rpx solid transparent;
    /* 三角形的左边 */
    border-right: 25rpx solid transparent;
    /* 三角形的右边 */
    border-bottom: 25rpx solid #E4FEEE;
    /* 三角形的颜色 */
    opacity: 0;

    // transition: opacity 0.06s ease-out;
    &.show {
      pointer-events: all;
      // transition: all 0.16s ease-out;
      transition: opacity 0.06s ease-out;
      opacity: 1;
    }
  }

  .font-xxxs {
    font-size: 20rpx;
  }
</style>